import React, { useState,useEffect} from 'react'
import { useLocation } from 'react-router'
import axios from 'axios'
import './index.css'
import bigimg from '../../../../static/img/Search and Particulars/bigpeach.png'
import littleimg1 from '../../../../static/img/Search and Particulars/img-1.png'
import littleimg2 from '../../../../static/img/Search and Particulars/img-2.png'
import littleimg3 from '../../../../static/img/Search and Particulars/grape.png'
import littleimg4 from '../../../../static/img/Search and Particulars/zishen.png'
import shareimg from '../../../../static/img/Search and Particulars/share.png'
import boyimg from '../../../../static/img/Search and Particulars/img-3.png'
import buyimg from '../../../../static/img/Search and Particulars/girl.png'
import buyimg2 from '../../../../static/img/Search and Particulars/boy.png'
import { Rate } from 'antd';//评论小星星插件
export default function Particulars() {
    var state = {
        imgs: [
            { img: littleimg1, ischeck: true },
            { img: littleimg2, ischeck: false },
            { img: littleimg3, ischeck: false },
            { img: littleimg1, ischeck: false },
        ],
        kmg:[
            {mg:'500g',ischeck:false},
            {mg:'1000g',ischeck:false},
            {mg:'1500g',ischeck:false},
            {mg:'2000g',ischeck:false}
        ],
        evaluate:[
           {id:0,phon:15215244,evaluate:'奶oh佛啊艾弗森的厚爱回复',time:'2154-10',timenums:'20:06:03',starnums:2},
           {id:1,phon:17275415485,evaluate:'闹翻你',time:'154-12',timenums:'20:06:03',starnums:3},
           {id:2,phon:152521248,evaluate:'倒是看来复活节你',time:'2501-12',timenums:'20:06:03',starnums:1},
           {id:3,phon:5252257485,evaluate:'奶oh佛啊艾弗森的厚爱回复',time:'1214-15',timenums:'20:06:03',starnums:4},
        ],
        infornation:{
            nowprice:'500积分',
            oldprice:'20元',
            title:'新疆哈密瓜1500kg',
            infor:'雀斑石榴持续热卖！云南蒙自石榴,原产波斯（今伊朗）一带,公元前二世纪时传 入我国。是中国三大石榴之一,粒大皮薄,汁多味甜爽口。雀斑石榴持续热卖！云 南蒙自石榴,原产波斯（今伊朗）一带,公元前二世纪时传入我国。是中国三大石 榴之一,粒大皮薄,汁多味甜爽口。',
            commodityname:'男士短衬衫',
            commodityevaluate:
            "明水礼盒十分优秀 ,是送朋友,送亲人的不二选择什么,您还不知道明水礼盒,今年过年不收礼,收礼只收明水礼盒,OUT了吧,赶紧买起礼盒送亲朋,送好友吧。完成交易,如有剩余库存,从新上架产品"
        },
        number: 0,//用于计算当前点击的第几个小照片
        isbechoce: false,//用于配合三目运算符改变小照片边框
        iscollect:false,  //用于配合三目运算符改变收藏星星的字体颜色
        chocemg:false     //用于配合三目运算符改变选择商品规格的边框和背景
    }
    //小图片初始化
    const [count, setCount] = useState(state)
    //初始化大照片
    const [countbigimg, setCountbigimg] = useState(bigimg)
    //购物车初始化
    const [countcar, setCountcar] = useState(0)
    //数据初始化
    const id = useLocation().search.substr(1)
    useEffect(() => {
        console.log(id);
       axios.post('http://localhost:3001/goodsinfor',{id}).then((res)=>{
           console.log(res.data);
         
           setCount({...state,infornation:res.data})
       })
    }, [])
    //点击选择小图片
    function ischoce(i) {
        console.log(i);
        const choceit = JSON.parse(JSON.stringify(count))
        choceit.number = i
        for (let index = 0; index < choceit.imgs.length; index++) {
            choceit.imgs[index].ischeck = false
        }
        choceit.imgs[i].ischeck = !choceit.imgs[i].ischeck
        setCount(choceit)
        setCountbigimg(choceit.imgs[i].img)
    }
    //点击右箭头切换小照片
    function isright() {
        const rightcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < rightcount.imgs.length; index++) {
            rightcount.imgs[index].ischeck = false
        }
        if (rightcount.number < 3) {
            rightcount.number++
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        } else {
            rightcount.number = 3
            rightcount.imgs[rightcount.number].ischeck = true
            setCount(rightcount)
            setCountbigimg(rightcount.imgs[rightcount.number].img)
        }
    }
    //点击左箭头切换小照片
    function isleft() {
        const leftcount = JSON.parse(JSON.stringify(count))
        for (let index = 0; index < leftcount.imgs.length; index++) {
            leftcount.imgs[index].ischeck = false
        }
        if (leftcount.number > 0) {
            leftcount.number--
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        } else {
            leftcount.number = 0
            leftcount.imgs[leftcount.number].ischeck = true
            setCount(leftcount)
            setCountbigimg(leftcount.imgs[leftcount.number].img)
        }
    }
    //点击加号购物车-1
    function loseone(){
        if (countcar>0) {
            setCountcar(countcar-1)
        }else{
            setCountcar(0)
        }
    }
    //点击改变小星星的颜色
    function changestar(){
        const starchoce=JSON.parse(JSON.stringify(count))
        starchoce.iscollect=!starchoce.iscollect
        setCount(starchoce)
    }
    //点击改变选择规格的边框和背景
    function ischocemg(i){
        const ischoceit =JSON.parse(JSON.stringify(count))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck=false   
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setCount(ischoceit)
    }
    // console.log(count.kmg);
    // console.log(count, count.number);
    //立即兑换
    function exchange(){
     
      const specification = count.kmg.filter(v=>{
          return v.ischeck===true
      })
      console.log(countcar,specification,specification[0].mg);
    }
    //模态框的继续购物
    function continuebuy(){
        let modul= document.getElementsByClassName('carmoudelshow')[0]
        modul.className='carmoudel'
    }
    return (
        <div className='P-middle'>
            <div className="P-top">
                <ul>
                    <li>您的当前位置:</li>
                    <li>首页&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>全部商品&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>苹果&nbsp;<i className='fa fa-angle-right'></i></li>
                    <li>阿苏克</li>
                </ul>
            </div>
            <div className="details">
                <div className="showimg">
                    <div className="bigimg">
                        <img src={countbigimg} alt="" />
                    </div>
                    <div className="littleimg">
                        <div className="left">
                            <i className='fa fa-angle-left' onClick={isleft}></i>
                        </div>
                        {
                            count?.imgs?.map((v, i) => {
                                return (
                                    <div className={v.ischeck? "littleimg2" : "littleimg1"} key={i} onClick={() => ischoce(`${i}`)}>
                                        <img src={v.img} alt="" />
                                    </div>
                                )
                            })
                        }
                        <div className="right" onClick={isright}>
                            <i className='fa fa-angle-right'></i>
                        </div>
                    </div>
                </div>
                <div className="showtext">
                    <div className="kg">
                        {count.infornation.title}
                    </div>
                    <div className="nationwide">全国</div>
                    <div className="friday">礼拜五</div>
                    <div className="nextday">次日达</div>
                    <div className="self-support">自营</div>
                    <div className="information">
                        <div className="senior">
                            <div className="seniorimg">
                                <img src={littleimg4} alt="" />
                                <div className="buyer">资深买家</div>
                            </div>
                        </div>
                        <div className="righttext">
                            {count.infornation.infor}
                        </div>
                    </div>
                    <div className="nowprice">
                        <strong>{count.infornation.jf}积分</strong>&nbsp;&nbsp;&nbsp;<span>价值{count.infornation.new_price}</span>
                    </div>
                    <div className="chocekg">
                        <div className="ischocekg">请选择规格</div>
                        {
                        count?.kmg?.map((v,i)=>{
                            return(
                        <div className={count.kmg[i].ischeck ? 'kgnum1' :'kgnum'} onClick={()=>ischocemg(`${i}`)} key={i}>{v.mg}</div>
                            )
                        })
                        }
                      
                        <div className="addchar">
                            <div className="ischocekg">数量:</div>
                            <div className="addnum">
                                <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                                <div className="carnums">{countcar}</div>
                                <div className="losenum" onClick={()=>setCountcar(countcar+1)}><i className='fa fa-plus'></i></div>
                            </div>
    
                            <div className="to-cart buycar" onClick={exchange}>
                                立即兑换
                            </div>
                        </div>
                        <div className="share">
                            <div className={count.iscollect ? "star" :"star1"} onClick={changestar} >
                                <i className='fa fa-star'></i>
                            </div>
                            <strong>收藏此商品</strong>
                            <div className="clickshare">
                                <img src={shareimg} alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="product-details">
                <div className="product-top">
                    <div className="product-top1">商品介绍</div>
                    <div className="product-top1 product-top2">商品评价</div>
                </div>
                <div className="boyshort">
                    <strong>{count.infornation.commodityname}</strong> <br/>
                    <span> 
                        {count.infornation.commodityevaluate}
                    </span>
                </div>
                <div className="boyimg">
                    <img src={boyimg} alt="" />
                </div>
                <div className="boyshort">
                    <strong>{count.infornation.commodityname}</strong> <br/>
                    <span> {count.infornation.commodityevaluate}
                        </span>
                </div>
                <div className="boyimg">
                    <img src={boyimg} alt="" />
                </div>
            </div>
            <div className="evaluate">
               <div className="product-top">
                    <div className="product-top1 product-top2">商品介绍</div>
                    <div className="product-top1 ">商品评价</div>
                </div>
                {
                    count?.evaluate?.map((v,i)=>{
                        return(
                            <div className="evaluate-information" key={i}>
                            <div className="evaluate-buyerimg">
                                <div className="buyerimg">
                                    <img src={buyimg} alt="" />
                                    <p>{v.phon}</p>
                                </div>
                            </div>
                            <div className="evaluate-text">
                                    <div className="statrandtime">
                                        <div className="stardiv">
                                            <Rate disabled defaultValue={v.starnums}/>
                                        </div>
                                        <p><span className='evaluate-time'>{v.time} &nbsp;&nbsp;{v.timenums}</span></p>  
                                        <p className='myevaluate'>{v.evaluate}</p>
                                    </div>
                                        <div className="myevaluateimg">
                                            <img src={buyimg2} alt="" />
                                        </div>
                                        <div className="myevaluateimg">
                                            <img src={buyimg2} alt="" />
                                        </div>
                                        <div className="myevaluateimg">
                                            <img src={buyimg2} alt="" />
                                        </div>
                                        <div className="myevaluateimg">
                                            <img src={buyimg2} alt="" />
                                        </div>
                            </div>
                        </div>
                        )
                    })
                }
            </div>
            <div className="carmoudel">
                <div className="addover">
                    <div className="rightnum">
                        <i className='fa fa-check-circle-o'></i>
                    </div>
                    <strong>加入购物车成功</strong>
                </div>
                <div className="continuebuy" onClick={continuebuy}>继续购物</div>
                <div className="buynow">立即购买</div>
            </div>
        </div>
    )
}
